function positionInfo(object)
{
  var obj = object;

  // mendapatkan width dan height
      this.getElementWidth = getElementWidth;
      function getElementWidth()
      {
        var elm;
        if(typeof(obj) == "object"){elm = obj;}
        else {elm = document.getElementById(obj);}
        return parseInt(elm.offsetWidth);
      }

      this.getElementHeight = getElementHeight;
      function getElementHeight()
      {
        var elm;
        if(typeof(obj) == "object"){elm = obj;}
        else {elm = document.getElementById(obj);}
        return parseInt(elm.offsetHeight);
      }

  //mendapatkan left, right, top, dan bottom
      this.getElementLeft = getElementLeft;
      function getElementLeft()
      {
        var x = 0;
        var elm;

        if(typeof(obj) == "object"){elm = obj;}
        else {elm = document.getElementById(obj);}

        while (elm != null && elm.style.position != 'relative')
        {
            x += elm.offsetLeft;
            elm = elm.offsetParent;
        }
        return parseInt(x);
      }

      this.getElementRight = getElementRight;
      function getElementRight(){return getElementLeft(obj) + getElementWidth(obj);}

      this.getElementTop = getElementTop;
      function getElementTop()
      {
        var y = 0;
        var elm;
        if(typeof(obj) == "object"){elm = obj;}
        else {elm = document.getElementById(obj);}
        while (elm != null && elm.style.position != 'relative')
        {
            y+= elm.offsetTop;
            elm = elm.offsetParent;
        }
        return parseInt(y);
      }

      this.getElementBottom = getElementBottom;
      function getElementBottom(){return getElementTop(obj) + getElementHeight(obj);}
}

/* Main function */
  function CalendarPopUp()
  {
    var calendarId = 'Calendar';
    var currentYear = 0;
    var currentMonth = 0;
    var currentDay = 0;

    var selectedYear = 0;
    var selectedMonth = 0;
    var selectedDay = 0;

    var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    var dateField = null;

    function setElementProperty(p_property, p_value, p_elmId)
    //untuk mengubah tampilan
    {
      var CalID = p_elmId;
      var ID = null;

      if(typeof(CalID) == "object"){ID = CalID;}
      else {ID = document.getElementById(CalID);}

      if((ID != null) && (ID.style != null))
      {
        ID = ID.style;
        ID[ p_property ] = p_value;
      }
    }

    function setProperty(p_property, p_value) {setElementProperty(p_property, p_value, calendarId);}
    //mengubah tampilan dengan id calendarId

    function getDaysInMonth(year, month) {return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];}
        //mendapatkan jumlah hari dalam 1 bulan tergantung bulan dan tahunnya
    function getDayOfWeek(year, month, day)
    //mendapatkan hari dalam 1 mgg
    {
      var date = new Date(year,month-1,day)
      return date.getDay();
    }

    this.clearDate = clearDate;
    function clearDate()
    //membersihkan tanggal
    {
      dateField.value = '';
      hide();
    }

    this.setDate = setDate;
    function setDate(year, month, day)
    //men-set tanggal, bulan, tahun
    {
      if (dateField)
      {
        if (month < 10) {month = "0" + month;} //menambahkan '0' jika bulan < 10
        if (day < 10) {day = "0" + day;} //menambahkan '0' jika bulan < 10

        var dateString = year+"-"+month+"-"+day;
        dateField.value = dateString;
        hide();
      }
      return;
    }

    this.changeMonth = changeMonth;
    function changeMonth(change)
    //mengubah bulan
    {
      currentMonth += change;
      currentDay = 0;
      if(currentMonth > 12)
      {
        currentMonth = 1;
        currentYear++;
      }
      else if(currentMonth < 1)
      {
        currentMonth = 12;
        currentYear--;
      }

      calendar = document.getElementById(calendarId);
      calendar.innerHTML = calendarDrawTable();
    }

    this.changeYear = changeYear;
    function changeYear(change)
    //mengubah tahun
    {
      currentYear += change;
      currentDay = 0;
      calendar = document.getElementById(calendarId);
      calendar.innerHTML = calendarDrawTable();
    }

    function getCurrentYear()
    // mendapatkan tahun hari ini
    {
      var year = new Date().getYear();
      if(year < 1900) year += 1900;
      return year;
    }

    function getCurrentMonth() {return new Date().getMonth() + 1;}
        //mendapatkan bulan hari ini

    function getCurrentDay() {return new Date().getDate();}
        //mendaptkan tanggal hari ini

    function calendarDrawTable()
    //menggambar tabel
    {
      var dayOfMonth = 1;
      var validDay = 0;
      var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
      var daysInMonth = getDaysInMonth(currentYear, currentMonth);
      var css_class = null;

      var table = "<table cellspacing='0' cellpadding='0' border='0'>";
      table = table + "<tr class='header'>";
      table = table + "  <td colspan='2' class='previous'><a href='javascript:changeCalendarMonth(-1);'>&lt;</a> <a href='javascript:changeCalendarYear(-1);'>&laquo;</a></td>";
      table = table + "  <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
      table = table + "  <td colspan='2' class='next'><a href='javascript:changeCalendarYear(1);'>&raquo;</a> <a href='javascript:changeCalendarMonth(1);'>&gt;</a></td>";
      table = table + "</tr>";
      table = table + "<tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr>";

      for(var week=0; week < 6; week++)
      {
        table = table + "<tr>";
        for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++)
        {
          if(week == 0 && startDayOfWeek == dayOfWeek) {validDay = 1;}
          else if (validDay == 1 && dayOfMonth > daysInMonth) {validDay = 0;}

          if(validDay)
          {
            if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {css_class = 'current';}
            else if (dayOfWeek == 0 || dayOfWeek == 6) {css_class = 'weekend';}
            else {css_class = 'weekday';}

            table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
            dayOfMonth++;
          }
          else
            {table = table + "<td class='empty'>&nbsp;</td>";}
        }
        table = table + "</tr>";
      }

      table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendar();'>Clear</a> | <a href='javascript:hideCalendar();'>Close</a></td></tr>";
      table = table + "</table>";

      return table;
    }

    this.show = show;
    function show(field)
    //menampilkan tanggal
    {
      can_hide = 0;

      if (dateField == field) {return;}
      else {dateField = field;}

      if(dateField)
      {
        try
        {
          var dateString = new String(dateField.value);
          var dateParts = dateString.split("-");

          selectedYear = parseInt(dateParts[3],10);
          selectedMonth = parseInt(dateParts[1],10);
          selectedDay = parseInt(dateParts[2],10);
        } catch(e) {}
      }

      if (!(selectedYear && selectedMonth && selectedDay))
      {
        selectedMonth = getCurrentMonth();
        selectedDay = getCurrentDay();
        selectedYear = getCurrentYear();
      }

      currentMonth = selectedMonth;
      currentDay = selectedDay;
      currentYear = selectedYear;

      if(document.getElementById)
      {
        calendar = document.getElementById(calendarId);
        calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);

        setProperty('display', 'block');

        var fieldPos = new positionInfo(dateField);
        var calendarPos = new positionInfo(calendarId);

        var x = fieldPos.getElementLeft();
        var y = fieldPos.getElementBottom();

        setProperty('left', x + "px");
        setProperty('top', y + "px");

        if (document.all)
        {
          setElementProperty('display', 'block', 'CalendarIFrame');
          setElementProperty('left', x + "px", 'CalendarIFrame');
          setElementProperty('top', y + "px", 'CalendarIFrame');
          setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarIFrame');
          setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarIFrame');
        }
      }
    }

    this.hide = hide;
    function hide()
    {
      if(dateField)
      {
        setProperty('display', 'none');
        setElementProperty('display', 'none', 'CalendarIFrame');
        dateField = null;
      }
    }

    this.visible = visible;
    function visible() {return dateField;}

    this.can_hide = can_hide;
    var can_hide = 0;
  }

  //pembuatan variable yang bs langsung di panggil
      var CalPop = new CalendarPopUp();
      function showCalendar(textField) {CalPop.show(textField);}
          //menampilkan kalender
      function clearCalendar() {CalPop.clearDate();}
          //menghapus string tanggal
      function hideCalendar(){if (CalPop.visible()) {CalPop.hide();}}
          //menyembunyikan kalender
      function setCalendarDate(year, month, day) {CalPop.setDate(year, month, day);}
          //men-set kalender date
      function changeCalendarYear(change) {CalPop.changeYear(change);}
          //mengubah tahun kalender
      function changeCalendarMonth(change) {CalPop.changeMonth(change);}
          //mengubah bulan kalender